<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue'
import MenuTable from './ui/MenuTable.vue'
import IconSelect from './ui/IconSelect.vue'
import { getAllPermission } from '@/api/user'

// 定义变量
// 控制弹框显隐
const dialogVisible = ref(true)

// 弹框title
const dialogTitle = ref('添加菜单')

// 表单对象
const formData = reactive({
  name: '',
  code: '',
  path: '',
  componetPath: '', 
  icon: '', 
  sortIndex: '',
  describe: ''
})

// 验证规则
const rules = {
  name: [ { required: true, message: '不能为空', trigger: 'change' } ],
  code: [ { required: true, message: '不能为空', trigger: 'change' } ],
  path: [ { required: true, message: '不能为空', trigger: 'change' } ],
  componetPath: [ { required: true, message: '不能为空', trigger: 'change' } ],
  icon: [ {
    required: true, message: '不能为空', trigger: 'change', validator: (rule, value, callback) => {
      console.log(value, typeof value === 'undefined', formData.icon)
      if (formData.icon === '' || typeof formData.icon === 'undefined') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    }
  } ],
  sortIndex: [ { required: true, message: '不能为空', trigger: 'change' } ]
}

// 表格数据
const permissionList:any = ref([])
// 表头
const tableColumn = ref([
  { label: '菜单名称', prop: 'name' },
  { label: '排序', prop: 'sortIndex' },
  { label: '路由路径', prop: 'path' },
  { label: '组件路径', prop: 'componetPath' }
])

//   tableTreeProp: {
// children: 'children',
//           }

// 定义函数
onMounted(async () => {
  getPermissionData()
})

// 获取表格数据
const getPermissionData = async () => {
  let res = await getAllPermission()
  permissionList.value = []
  permissionList.value = [ ...res.result ]
  console.log('菜单数据---->', res, permissionList.value)
}

// 展示菜单表单弹框
const showDialog = (type:number,row?:any) => {
  if(type === 0){
    
    dialogTitle.value = '添加菜单'
  } else if(type === 1){
    dialogTitle.value = '添加子菜单'
  } else {
    dialogTitle.value = '编辑菜单'
  }
  dialogVisible.value = true
}

// 关闭弹框
const closeDialog = () => {
  formData.name = ''
  formData.code = ''
  formData.path = ''
  formData.componetPath = ''
  formData.icon = ''
  formData.sortIndex = ''
  formData.describe = ''
  dialogVisible.value = false
}
</script>

<template>
  <div class="authority-config-main-box">
    <div class="title-box">
      <div>
        权限配置
      </div>
      <div
        class="add-menu"
        @click="showDialog(0)"
      >
        添加菜单
      </div>
    </div>
    <div class="table-box">
      <MenuTable
        :show-dialog="showDialog"
        :permission-list="permissionList"
      />
    </div>
    <el-dialog
      v-model="dialogVisible"
      v-el-drag
      :close-on-click-modal="false"
      :title="dialogTitle"
      @close="closeDialog"
    >
      <el-form
        ref="menuDia"
        :rules="rules"
        label-position="left"
        label-width="80px"
        :model="formData"
      >
        <el-form-item
          prop="name"
          label="菜单名"
        >
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item
          prop="code"
          label="编号"
        >
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item
          prop="path"
          label="路由路径"
        >
          <el-input v-model="formData.path" />
        </el-form-item>
        <el-form-item
          prop="componetPath"
          label="组件路径"
        >
          <el-input v-model="formData.componetPath" />
        </el-form-item>
        <el-form-item
          prop="icon"
          label="图标"
        >
          <IconSelect :form="formData" />
          <!-- <icon-picker v-model="formData.icon" /> -->
        </el-form-item>
        <el-form-item
          prop="sortIndex"
          label="排序"
        >
          <el-input v-model="formData.sortIndex" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.describe" />
        </el-form-item>
      </el-form>
      <div class="diaFooter">
        <el-button @click="closeDialog">
          取 消
        </el-button>
        <el-button
          type="primary"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang=scss>
.authority-config-main-box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .title-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding-left: 20px;
    border-bottom: 1px solid #e0dddd;

    /* border: 1px solid red; */

    .add-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 32px;
      margin-left: 15px;
      font-size: 14px;
      border: 1px solid #cac6c6;
      border-radius: 3px;

      &:hover {
        color: #409eff;
        background-color: #ecf5ff;
        border-color: #c6e2ff;
        cursor: pointer;
      }
    }
  }

  .table-box {
    margin-top: 20px;
    padding: 0 20px;
  }
}

.diaFooter {
  display: flex;
  justify-content: center;
}
</style>